<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑策略表配置</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form ref="form" label-width="auto">
                        <el-form-item label="">
                            <el-button @click='handleAddValueDef'>添加策略项</el-button>
                        </el-form-item>
                        <el-table :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
                            <el-table-column label="#" min-width="10px" prop='id'>
                            </el-table-column>

                            <el-table-column label="策略代码">
                                <template slot-scope="scope">
                                    <el-input v-model.trim="scope.row.code" onkeyup="value=$util.tokentrim(value)"
                                        onbeforepaste="clipboardData.setData('text',$util.tokentrim(clipboardData.getData('text')))"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column label="策略说明" min-width="60px">
                                <template slot-scope="scope">
                                    <el-input v-model.trim="scope.row.name"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column v-for="def in ruleDef.valueDefList" :key="def.id">
                                <template slot="header">
                                    <span :id="'valuedef-'+def.id">{{def.code}}</span>
                                    <el-link type="primary" @click="handleValueSetting(def)">设置</el-link>
                                </template>
                                <template slot-scope="scope">
                                    <el-input v-model.trim="scope.row.valueMap[def.code]" :type='def.type'></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" min-width="100px">
                                <template slot="header">
                                    <span>操作</span>
                                    <el-button type="success" size='mini' @click="handleInsertRowEvent(ruleDef.list.length)">追加记录(+)
                                    </el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-tooltip content="上增一行" placement="top-start">
                                        <el-button size='mini' @click="handleInsertRowEvent(scope.$index)" placeholder="">干</el-button>
                                    </el-tooltip>
                                    <!--<el-tooltip content="下增一行" placement="top-start">
                                        <el-button @click="handleInsertRowEvent(scope.$index+1)">士</el-button>
                                    </el-tooltip> -->
                                    <el-tooltip content="删除当前行" placement="top-start">
                                        <el-button size='mini' @click="handleDeleteRowEvent(scope.$index)">X</el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-form-item label="">
                            <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                            &nbsp;&nbsp;
                            <el-button type="danger" @click='handleDeleteRuleEvent'>删除规则</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!--             <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane> -->
            </el-tabs>

        </div>

        <div id='columnSettingdialog'>
            <template>
                <el-dialog title="数据列信息" :visible.sync="visible">
                    <el-form ref="form" :model='valueDef' label-width="100px">
                        <el-form-item label="数据代码" prop='code' :rules="[{
                    				required: true,
                    				message: '请输入数值代码',
                    				trigger: 'blur'
                    			},
                    			{
                    				min: 3,
                    				max: 30,
                    				message: '长度在 3 到 30 个字符',
                    				trigger: 'blur'
                    			}
                    		]">
                            <el-input v-model.trim="valueDef.code" placeholder="数据代码" onkeyup="value=$util.tokentrim(value)"
                                onbeforepaste="clipboardData.setData('text',$util.tokentrim(clipboardData.getData('text')))"></el-input>
                        </el-form-item>
                        <el-form-item label="数据说明">
                            <el-input v-model.trim="valueDef.name" placeholder="数据说明"></el-input>
                        </el-form-item>
                        <el-form-item label="数据类型" prop='type' :rules="[{
                    				required: true,
                    				message: '请输入数值代码',
                    				trigger: 'blur'
                    			}
                    		]">
                            <el-select v-model="valueDef.type" placeholder="请选择" style='width: 100%;'>
                                <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button @click='handleValueDefSubmit' type="primary">确认</el-button>
                            <el-button @click='visible=false'>关闭</el-button>
                            <el-button type='danger' v-if='valueDef.id > 0' @click='handleValueDefDelete'>删除</el-button>
                        </el-form-item>

                    </el-form>
                </el-dialog>
            </template>
        </div>

        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            window.$util = $util; //for html document event
            import * as $rest from '../lib/hc-rest-service.js'
            import {} from '/com/hc-rule-basic-properties.js'
            
            $rest.check$pinfoOrLoad(function() {
                $rest.obtainRuleDefByRpath($util.getUrlArgOrDefault('rpath', 'xsxdjc/SimpleStrategy'), initvm);
            }, 'xsxdjc/Main');

            function initvm(ruleDef) {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        ruleDef: ruleDef
                    },
                    methods: {
                        handleInsertRowEvent: function(index) {
                            this.ruleDef.list.splice(index, 0, {
                                id: ++this.ruleDef.rmaxid,
                                code: '',
                                name: '',
                                valueMap: {}
                            });
                        },
                        handleDeleteRowEvent: function(index) {
                            vm.ruleDef.list.splice(index, 1);
                        },
                        handleUpdateRuleEvent: function() {
                            $rest.updateRuleDefInVm(this)
                        },
                        handleDeleteRuleEvent: function() {
                            $rest.deleteRuleDefInVm(this)
                        },

                        handleAddValueDef: function() {
                            let id = ++vm.ruleDef.valuemaxid;
                            let valueDef = {
                                id: 0,
                                code: '数值' + id,
                                name: "数值" + id,
                                type: "text",
                            };
                            this.handleValueSetting(valueDef)
                        },
                        handleValueSetting: function(valueDef) {
                            valueSettingVm.valueDef = $util.clone(valueDef);
                            // valueSettingVm.valueDef = valueDef;
                            valueSettingVm.visible = true;
                        },
                    }
                });
            };


            window.valueSettingVm = new Vue({
                el: '#columnSettingdialog',
                data: {
                    visible: false,
                    valueDef: {},
                    dataTypeOptions: [{
                        value: 'text',
                        label: '文本'
                    }, {
                        value: 'number',
                        label: '数字'
                    }]
                },
                methods: {
                    handleValueDefSubmit: function() {
                        let self = this;
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                this.visible = false;
                                if (this.valueDef.id === 0) {
                                    this.valueDef.id = vm.ruleDef.valuemaxid;
                                    vm.ruleDef.valueDefList.push(this.valueDef)
                                }else
                                {
                                    let old = vm.ruleDef.valueDefList.find(it=>it.id === this.valueDef.id);
                                    if(old.code !== this.valueDef.code)
                                    {
                                        document.getElementById('valuedef-'+this.valueDef.id).innerHTML = this.valueDef.code;
                                        vm.ruleDef.list.forEach(it=>{
                                            it.valueMap[this.valueDef.code] = it.valueMap[old.code];
                                            delete it.valueMap[old.code];
                                        })
                                    }
                                    Object.assign(old,this.valueDef);
                                }
                            } else {
                                self.$message({
                                    type: 'warning',
                                    message: '验证失败，请检查.'
                                })
                                return false;
                            }
                        });
                    },
                    handleValueDefDelete: function() {
                        this.visible = false;
                        let index = vm.ruleDef.valueDefList.findIndex(it => it.id === this.valueDef.id);
                        vm.ruleDef.valueDefList.splice(index, 1);
                        vm.ruleDef.list.forEach(it => delete it.valueMap[this.valueDef.code]);
                    }
                },
            });
        </script>
    </body>
</html>
